<template>
    <div class="banner">
        <swiper ref="mySwiper" :options="swiperOptions" @slideChange="onSlideChange" @reachEnd="onReachEnd">
            <swiper-slide v-for="(i, d) in list" :key="i.id">
                <div class="silder_img" :class="{ isType }">
                    <img v-if="i.txt" :src="i.url" data-aos="fade" alt="">
                    <img v-if="current == d || !i.txt" :class="{ txt: i.txt }" :data-aos="i.txt ? 'fade-up' : ''"
                        data-aos-easing="linear" data-aos-duration="1000" :src="i.txt ? i.txt : i.url"
                        @click="goLink(i.id)" :style="{ cursor: i.link ? 'pointer' : 'default' }">
                    <img v-if="i.txt2 && current == d" class="txt2" data-aos="fade-up" data-aos-delay="800"
                        data-aos-easing="linear" data-aos-duration="1000" :src="i.txt2">
                </div>
                <div data-aos="fade-up" v-if="isType && current == d" class="carName"><span>{{ i.name }}</span></div>
            </swiper-slide>
        </swiper>
        <div class="dot1" v-if="dotType == 1">
            <div class="dot">
                <div @click="goTo(d + 1)" v-for="(i, d) in list" :key="i.id">
                    <span :class="{ fillColor: fillColor && d == current }"
                        :style="{ backgroundColor: d == current ? '#000' : '#ABABAB' }"></span>
                </div>
            </div>
        </div>
        <div class="dot2" v-if="dotType == 2">
            <div class="dot">
                <div @click="goTo(d + 1)" v-for="(i, d) in list" :key="i.id">
                    <span :class="{ fillColor: fillColor && d == current }"
                        :style="{ backgroundColor: d == current ? '#000' : '#ABABAB' }"></span>
                </div>
            </div>
        </div>
        <div v-if="butType == 1" class="switch1">
            <img @click="goPrev" src="@/assets/img/prev.png" alt="">
            <img @click="goNext" src="@/assets/img/next.png" alt="">
        </div>
        <div v-if="butType == 2" class="switch2">
            <img @click="goPrev" src="@/assets/img/prev.png" alt="">
            <img @click="goNext" src="@/assets/img/next.png" alt="">
        </div>
        <!-- //车型切换 -->
        <div class="hotType" v-if="isType">
            <h2>热门车型</h2>
            <div class="title">
                <span @click="choseType(i.id)" :class="{ active: curType == i.id }" v-for="i in typeList" :key="i.id">
                    {{ i.name }}
                </span>
            </div>
        </div>

        <!-- <div class="custom-controls">
            <button @click="goPrev">上一张</button>
            <button @click="goNext">下一张</button>
            <button @click="goTo(3)">跳转到第4张</button>
        </div> -->
    </div>
</template>

<script>
export default {
    name: 'mobSwiper',
    props: {
        list: {//轮播列表
            type: Array,
            default: () => {
                return [
                    // { id: 1, url: 'http://test2.woyii.com/upload/admin/20250710/9721980c3ca6ba5b9f7639662de1e168.jpg' },
                    // { id: 2, url: 'http://test2.woyii.com/upload/admin/20250710/9721980c3ca6ba5b9f7639662de1e168.jpg' }
                ]
            }
        },
        dotType: {//指示器类型
            type: Number,
            default: 1
        },
        butType: {//按钮类型
            type: Number,
            default: 1
        },
        typeList: {//车型选择切换

            type: Array
        },
        autoplay: {//是否自动播放
            type: Boolean,
            default: true
        },

        isType: {//是否显示热门车型
            type: Boolean,
            default: false
        },
        fillColor: {//是否展示选中指示器的填充颜色动画
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            swiperOptions: {
                loop: true,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                }
            },
            current: 0,
            curType: ''
        }
    },
    watch: {
        list: {
            handler() {
                this.$nextTick(() => {
                    this.swiper.slideTo(1)
                    this.swiper.update() // 更新 Swiper
                })
            }, deep: true
        },
        typeList: {
            handler(n) {
                if (n) {
                    this.curType = n[0].id
                    this.$emit('typeChange', n[0].id)
                }
            }
        },
        autoplay: {
            handler(n) {
                if (n) {
                    this.swiperOptions = {
                        loop: true,
                        autoplay: {
                            delay: 4000,
                            disableOnInteraction: false,
                        }
                    }
                } else {
                    this.swiperOptions = {
                        loop: true,
                        autoplay: false,
                    }
                }
            }, immediate: true
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        }
    },

    mounted() {

    },
    methods: {
        // 跳转外部链接
        goLink(id) {
            this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 3
                        }
                    })

            // if (!url) {
            //     return
            // }

            // // 检查url是否以http://或https://开头
            // if (!/^https?:\/\//i.test(url)) {
            //     // 如果不是外部链接，使用router.resolve处理
            //     const route = this.$router.resolve({
            //         path: url,
            //     });
            //     window.open(route.href, '_blank');
            // } else {
            //     // 如果是外部链接，直接打开
            //     window.open(url, '_blank');
            // }
            // // 另页打开
        },
        choseType(id) {
            this.curType = id
            this.$emit('typeChange', id)
        },
        goNext() {
            this.swiper.slideNext()
        },
        goPrev() {
            this.swiper.slidePrev()
        },
        goTo(index) {
            this.swiper.slideTo(index)
        },

        // 事件监听方法
        onSlideChange() {

            this.current = this.swiper.realIndex
        },
        onReachEnd() {
            // console.log('已到达最后一张幻灯片')
        },

        // 开始自动播放
        startAutoplay() {
            this.swiper.autoplay.start()
        },

        // 停止自动播放
        stopAutoplay() {
            this.swiper.autoplay.stop()
        },

        // 更新 Swiper (当动态改变 slides 时调用)
        updateSwiper() {
            this.swiper.update()
        }
    }
}
</script>

<style lang="scss" scoped>
.banner {
    width: 1920px;
    height: 3362px;
    position: relative;
}

.carName {
    width: 100%;
    font-family: MiSans;
    font-weight: 500;
    font-size: 90px;
    color: #373737;
    position: absolute;
    bottom: 398px;
    text-align: center;
    height: 90px;
    left: 0;
    right: 0;
}

.silder_img {
    width: 1920px;
    height: 3362px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .txt2 {
        position: absolute;
        z-index: 221;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }

    .txt {
        position: absolute;
        z-index: 222;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }
}

.dot1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 114px;
    width: 100%;
    z-index: 22;

    .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 28px;
        background-color: #fff;
        border-radius: 28px;

        >div {
            padding: 0 20px;
            cursor: pointer;

            >span {
                display: block;
                height: 20px;
                width: 20px;
                border-radius: 50%;
            }

            .fillColor {
                overflow: hidden;
                border-radius: 20px;
                width: 80px;
                position: relative;
                background-color: #ABABAB !important;

                &::before {
                    content: '';
                    border-radius: 20px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    background-color: #000;
                    animation: fillPseudo 4s ease-in-out forwards;
                }
            }
        }
    }
}

@keyframes fillPseudo {
    100% {
        width: 100%;
    }
}

.dot2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 114px;
    width: 100%;
    z-index: 22;

    .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 28px;

        border-radius: 28px;

        >div {
            padding: 0 20px;
            cursor: pointer;

            >span {
                display: block;
                height: 20px;
                width: 20px;
                border-radius: 50%;
                margin: 0 20px;
                background-color: #000;
            }

            .fillColor {
                border-radius: 20px;
                width: 80px;
                position: relative;
                background-color: #ABABAB !important;
                overflow: hidden;

                &::before {
                    content: '';
                    border-radius: 20px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    background-color: #000;
                    animation: fillPseudo 4.5s ease-in-out forwards;
                }
            }
        }
    }
}

.switch1,
.switch2 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    z-index: 22;
    width: 100%;
    padding: 0 60px;
    bottom: 1800px;

    img {
        width: 123px;
        height: 123px;
    }
}

.switch2 {
    bottom: 388px;
}

.hotType {
    width: 100%;
    z-index: 22;
    top: 368px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h2 {
        font-family: MiSans;
        font-weight: 600;
        font-size: 175px;
        color: #000000;
        padding: 0;
        margin: 0 0 135px;
    }

    .title {
        font-family: MiSans;
        font-weight: 600;
        font-size: 53px;
        color: #000000;
        padding: 30px 48px;
        background-color: #fff;
        border-radius: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
            display: block;
            padding: 21px 75px;
            border-radius: 70px;
        }

        .active {
            color: #fff;
            background-color: #D93232;
        }
    }
}

.isType {
    padding: 990px 190px 780px;

    img {
        object-fit: contain !important;
    }
}
</style>